<template>
	<view>
		<view class="header">
			<image :src="doctorData.avatar"></image>
			<view style="display: flex; flex-direction: column; margin:20rpx 0;">
				<text style="font-size: 36rpx; margin: 20rpx;">{{doctorData.name}}</text>
				<text style="font-size: 28rpx; color: #999; margin:0 20rpx ;">{{doctorData.roleId?.name}}</text>
			</view>
		</view>


		<servicesList :doctorId='doctorData' />
	</view>


</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		watch
	} from 'vue';
	import {
		aCharacterApi
	} from '../../../api/teamDoctor';
	import {
		getserviceFullDetailApi
	} from '../../../api/service';

	const serviceId = ref('')
	const doctorId = ref({
		_id: ''
	})
	const doctorData = ref({})

	onLoad((options) => {
		if (options._id) {


			aCharacter(options._id)

			getService(options._id)
		}


	})



	//团队数据

	//获取医生详情
	function aCharacter(data) {
		aCharacterApi({
			_id: data
		}).then(res => {
			if (res.code == 200) {
				doctorData.value = res.data
			}
		})
	}

	// 获取服务

	function getService(data) {
		getserviceFullDetailApi({
				_id: data
			})

			.then(res => {

				if (res.code == 200) {
					serviceId.value = data
					aCharacter(res.data.doctorId._id)
				}
			})
	}
</script>

<style scoped lang="scss">
	.header {
		display: flex;
		background-color: rgb(247, 250, 253);
		;
		padding: 20rpx;

		image {
			width: 128rpx;
			height: 128rpx;
			margin: 20rpx 0;
		}
	}
</style>